/**
 * 角色页
 */
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import shouldComponentUpdate from '../../components/decorator/shouldComponentUpdate';
import Table from './table';
import Filter from './filter';
import getPagination from '../../components/pagination';

@shouldComponentUpdate
class ProductList extends React.Component {
	constructor(props, context) {
		super(props, context);
		this.state = {
			queryData: {
        asc: false,
        openSort: true,
        orderByField: 'utime',
        searchCount: true,
        current: 1,
        size: 10,
        query: {}
      }
		};
  }

  componentWillMount() {
    const { queryData } = this.state;
    this.query(queryData);
  }

	onSelect = keys => {
		this.props.dispatch({
			type: 'productList/set',
			payload: {
				selectedRowKeys: keys
			}
		});
	}

	goToDetail = id => {
		const { history } = this.props;
		history.push(`/productList/${id}`);
	}

	delete = ids => {
		// 删除
		if (!ids || !ids.length) return;
		const { dispatch } = this.props;
		dispatch({
			type: 'productList/multiDelete',
			ids
		});
  }

  pageChange = (current, size) => {
    const { queryData } = this.state;
    this.setState({
      queryData: {
        ...queryData,
        current,
        size,
      }
    }, this.query);
  }

  pagesizgeChange = (current, size) => {
    const { queryData } = this.state;
    this.setState({
      queryData: {
        ...queryData,
        current: 1,
        size,
      }
    }, this.query);
  }

  queryChange = (query) => {
    const { queryData } = this.state;
    this.setState({
      queryData: {
        ...queryData,
        query: {
          ...query,
        }
      }
    }, this.query);
  }

	query = () => {
		const { dispatch } = this.props;
    const { queryData } = this.state;
    dispatch({
      type: 'productList/query',
      payload: queryData,
    });
  }

	render() {
		const { productList } = this.props;
		// const { list } = this.state;
		const { selectedRowKeys, list, total, current } = productList;
    console.log('selectedRowKeys')
    console.log(selectedRowKeys)
		return (
			<div className="content-inner">
				<Filter
					add={this.goToDetail}
					delete={this.delete}
					keys={selectedRowKeys}
					query={this.queryChange}
					exportTitle="productExport"
				/>
				<Table
          list={list}
          pagination={getPagination({
            total,
            current,
            onChange: this.pageChange,
            onShowSizeChange: this.pagesizgeChange
          })}
					select={this.onSelect}
					edit={this.goToDetail}
					selectKeys={selectedRowKeys}
					exportTitle="productExport"
				/>
			</div>
		);
	}
}

export default connect(
	({ productList, loading }) => ({ productList, loading })
)(ProductList);
